<template>
  <div class="report-container">

    <div class="report-title">
      <span class="title">线圈不良品质看板</span>
      <span style="font-weight: bold;color: #00ff9e;position: relative;left: 15rem;">{{ nowDate }}</span>
    </div>

    <div class="report-main">

      <div class="con_top">
        <SimEcharts height="100%" class="e-chart-border" :chart-data="barData01"/>
      </div>

      <div class="con_middle">
        <SimEcharts height="100%" class="e-chart-border" :chart-data="barData02"/>
      </div>

      <div class="con_below">
        <div class="below_left">
          <SimEcharts height="100%" class="e-chart-border" :chart-data="barData03"/>
        </div>
        <div class="below_right">
          <SimEcharts height="100%" class="e-chart-border" :chart-data="barData04"/>
        </div>
      </div>


    </div>


  </div>
</template>

<script>
// import {
//   monthQualifiedBadScrap,
//   monthProductLinesBadItems,
//   monthNormsBadProject,
//   monthMemberBadProject,
//   PersonMonthlyStepOne,
//   ProductLineMonthlyStepOne
// } from '@/api/service-module/dashBoard/BadQualityAllDashBoard'
import {barData, barData2} from '@/api/service-module/dashBoard/echartsData'
import {closeWebsocket, sendMessage, connectWebsocket} from '@/api/websocket'

export default {
  name: 'BadQualityAllDashBoard',
  data() {
    return {
      nowDate: '',
      rightHeader: {},
      barData01: JSON.parse(JSON.stringify(barData)),
      barData02: JSON.parse(JSON.stringify(barData)),
      barData03: JSON.parse(JSON.stringify(barData)),
      barData04: JSON.parse(JSON.stringify(barData2)),
      barData05: JSON.parse(JSON.stringify(barData2)),
      barData06: JSON.parse(JSON.stringify(barData2)),
      tableData: []
    }
  },
  created() {
    // this.timer = setInterval(this.initData, 15 * 1000)
    this.timer2 = setInterval(this.formatDate, 1000)
  },
  mounted() {
    this.rollText()
    this.initWebData()
    this.reloadWeb()
  },
  destroyed() {
    // window.clearInterval(this.timer)
    window.clearInterval(this.timer2)
    closeWebsocket()
  },
  methods: {
    initWebData() {
      connectWebsocket(
        // 测试地址
        process.env.VUE_APP_WS_URL+'/BadQuantityWebSocket/BadQuantity',
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          let dataJson = JSON.parse(data)
          this.initData(dataJson)
        },
        () => {
          sendMessage("im tird!")
        }
      )
    },
    reloadWeb(){
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload,1000*60*60*8)
    },
    initData(data) {
      this.barData01.title.text = '物料规格月不良项TOP15'
      this.barData01.color = '#ffc20e'
      this.barData01.xAxis.axisLabel.fontSize = 14
      this.queryBadProject(data.badQuantityBadItems)

      this.barData02.title.text = '员工月不良项TOP15'
      this.barData02.color = '#FF5500'
      this.barData02.xAxis.axisLabel.fontSize = 20
      this.queryBadModel(data.badQuantityPersonItems)

      this.barData03.title.text = '产线月不良项TOP'
      this.barData03.color = '#45b97c'
      this.barData03.xAxis.axisLabel.fontSize = 15
      this.queryFirstCheckAvgTime(data.badQuantityBadProductLines)

      this.barData04.title.text = '不良原因不良项TOP'
      this.barData04.color = '#f58f98'
      this.barData04.xAxis.axisLabel.fontSize = 20
      this.queryQuaCheckTimes(data.badQuantityQualityNumbers)

      this.formatDate()
    },
    queryBadProject(data) {
      let xAxis = []
      let series = []
      if(data.length){
        xAxis = data.map(item => {
          return item.itemDesc
        })
        series = data.map(item => {
          return item.ncProjectNum
        })
        this.barData01.xAxis.data = xAxis
        this.barData01.series[0].data = series
      }
      // monthNormsBadProject().then(resp => {
      //   if (resp.code === '200' && resp.data.length) {
      //     xAxis = resp.data.map(item => {
      //       return item.itemDesc
      //     })
      //     series = resp.data.map(item => {
      //       return item.ncProjectNum
      //     })
      //     this.barData01.xAxis.data = xAxis
      //     this.barData01.series[0].data = series
      //   }
      // })
    },
    queryBadModel(data) {
      let xAxis = []
      let series = []
      if(data.length){
        xAxis = data.map(item => {
          return item.realName
        })
        series = data.map(item => {
          return item.ncProjectNum
        })
        this.barData02.xAxis.data = xAxis
        this.barData02.series[0].data = series
      }
      // monthMemberBadProject().then(resp => {
      //   if (resp.code === '200' && resp.data.length) {
      //     xAxis = resp.data.map(item => {
      //       return item.realName
      //     })
      //     series = resp.data.map(item => {
      //       return item.ncProjectNum
      //     })
      //     this.barData02.xAxis.data = xAxis
      //     this.barData02.series[0].data = series
      //   }
      // })
    },
    queryFirstCheckAvgTime(data) {
      let xAxis = []
      let series = []
      if(data.length){
        xAxis = data.map(item => {
          return item.roleName
        })
        series = data.map(item => {
          return item.ncProjectNum
        })
        this.barData03.xAxis.data = xAxis
        this.barData03.series[0].data = series
      }
      // monthProductLinesBadItems().then(resp => {
      //   if (resp.code === '200') {
      //     xAxis = resp.data.map(item => {
      //       return item.roleName
      //     })
      //     series = resp.data.map(item => {
      //       return item.ncProjectNum
      //     })
      //     this.barData03.xAxis.data = xAxis
      //     this.barData03.series[0].data = series
      //   }
      // })
    },
    queryQuaCheckTimes(data) {
      let xAxis = []
      let series = []
      if(data.length){
        xAxis = data.map(item => {
          return item.ncDesc
        })
        series = data.map(item => {
          return item.ncProjectNum
        })
        this.barData04.xAxis.data = xAxis
        this.barData04.series[0].data = series
      }
      // monthQualifiedBadScrap().then(resp => {
      //   let xAxis = [];
      //   let series = []
      //   let text = []
      //   if (resp.code === '200') {
      //     xAxis = resp.data.map(item => {
      //       return item.ncDesc
      //     })
      //     series = resp.data.map(item => {
      //       return item.ncProjectNum
      //     })
      //     this.barData04.xAxis.data = xAxis
      //     this.barData04.series[0].data = series
      //   }
      // })
    },
    /*   queryNcStepOne() {
         PersonMonthlyStepOne().then(resp => {
           let xAxis = [];
           let series = []
           let text = []
           if (resp.code === '200') {
             xAxis = resp.data.map(item => {
               return item.realName
             })
             series = resp.data.map(item => {
               return item.ncProjectNum
             })
             text = resp.data.map(item => {
               return item.ncName
             })
             this.barData05.xAxis.data = xAxis
             this.barData05.series[0].data = series
           }
         })
       },
       queryNcStepTwo() {
         ProductLineMonthlyStepOne().then(resp => {
           let xAxis = [];
           let series = []
           let text = []
           if (resp.code === '200') {
             xAxis = resp.data.map(item => {
               return item.productLineDesc
             })
             series = resp.data.map(item => {
               return item.ncProjectNum
             })
             text = resp.data.map(item => {
               return item.ncName
             })
             this.barData06.xAxis.data = xAxis
             this.barData06.series[0].data = series
           }
         })
       },*/
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      if (month < 10) {
        month = '0' + month
      }
      //const day = date.getDate() // 日
      //const week = date.getDay() // 星期
      //const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      //let hour = date.getHours() // 时
      //hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      //let minute = date.getMinutes() // 分
      //minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      //let second = date.getSeconds() // 秒
      //second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}`
    },
    rollText() {
      let speed = 280
      let that = this

      function Marquee() {
        if (that.$refs.tableContent) {
          if (that.$refs.tableContent.scrollTop >= that.$refs['tableContent'].offsetHeight) {
            that.$refs.tableContent.scrollTop = 0
          } else that.$refs.tableContent.scrollTop = that.$refs.tableContent.scrollTop + 1
        }
      }

      setInterval(Marquee, speed)
    }
  }

}
</script>

<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      .title {
        font-size: 1.5rem;
      }
    }

    // 内容
    .report-main {
      height: calc(100%);

      .con_top {
        width: 100%;
        height: 30%;
        border: 1px solid rgba(0, 255, 255, 0.08);
      }

      .con_middle {
        width: 100%;
        height: 30%;
        border: 1px solid rgba(0, 255, 255, 0.08);
        margin-top: 0.4rem;
      }

      .con_below {
        width: 100%;
        height: 40%;
        border: 1px solid rgba(0, 255, 255, 0.08);
        margin-top: 0.4rem;
        display: flex;

        .below_left {
          width: 100%;
          border: 1px solid rgba(0, 255, 255, 0.08);
          margin-right: 0.4rem;
        }

        .below_right {
          width: 100%;
          border: 1px solid rgba(0, 255, 255, 0.08);
        }

      }
    }


    .e-chart-border {
      border: 1px solid rgba(0, 255, 255, 0.08);
      margin-bottom: 0.5%;
    }

  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;
    // 看板标题
    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;
      font-size: 2rem;
    }

    // 内容
    .report-main {
      height: calc(100%);

      .con_top {
        width: 100%;
        height: 30%;
        border: 1px solid rgba(0, 255, 255, 0.08);
      }

      .con_middle {
        width: 100%;
        height: 30%;
        border: 1px solid rgba(0, 255, 255, 0.08);
        margin-top: 0.4rem;
      }

      .con_below {
        width: 100%;
        height: 40%;
        border: 1px solid rgba(0, 255, 255, 0.08);
        margin-top: 0.4rem;
        display: flex;

        .below_left {
          width: 100%;
          border: 1px solid rgba(0, 255, 255, 0.08);
          margin-right: 0.4rem;
        }

        .below_right {
          width: 100%;
          border: 1px solid rgba(0, 255, 255, 0.08);
        }

      }
    }


    .e-chart-border {
      border: 1px solid rgba(0, 255, 255, 0.08);
      margin-bottom: 0.5%;
    }
  }
}
</style>

